.buttonGroup :hover{
  color: unset;
}

//树形组件样式
.treeShape{
  :global{
    .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected{
      background-color: unset;
    }
    .ant-tree-title{
      // padding: 0 4px;
      width: 100%;
      display: inline-block;
      border-radius: 3px 3px 3px 3px;
    }
    .ant-tree li .ant-tree-node-content-wrapper{
      height: unset;
      width: calc(100% - 25px);
    }
    .ant-tree li .ant-tree-node-content-wrapper:hover{
      background-color: unset;
    }
  }

  .treeNameBox{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    border-radius: 3px;
    gap:8px;
    .treeName{
      width: 100%;
      white-space: noWrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .moreOpt{
      display: none;
      align-items: center;
      gap:5px;
      flex-shrink: 0;
    }
    .plusIconBox,.optIconBox{
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .plusIconBox:hover,.optIconBox:hover{
      background: #CED0D1;
      border-radius: 4px;
    }
    .plusIcon{
      width: 14px;
    }
    .optIcon{
      width: 14px;
    }
  }
  .treeNameBox:hover{
    background: #E4E6E7;
    .moreOpt{
      display: flex;
    }
  }
  .treeNameOpt{
    background: #E4E6E7;
    .moreOpt{
      display: flex;
    }
  }
  .treeNameSelect{
    background: #F2F3FF !important;
    color: #0052D9 !important;
  }

  .tableTop{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
}

//更多操作按钮样式
.moreOptBtn{
  i{
    transition: transform 0.3s ease 0s !important;
  }
}
.moreOptBtn:hover{
  i{
    transform: rotateZ(180deg) !important;
  }
}

//权限列表样式
.listBox{
  border-top: 1px solid #dee0e3;
  border-bottom: 1px solid #dee0e3;
  .listItem{
    display: flex;
    position: relative;
    height: 56px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    .itemAvatar{
      flex-shrink: 0;
    }
    .itemMain{
      margin-left: 10px;
      border-bottom: 1px solid #dee0e3;
      width: 100%;
      height: 100%;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      overflow: hidden;
      .itemContent{
        width: 100%;
        .itemTitle{
          font-size: 14px;
          color: #1f2329;
          line-height: 22px;
          padding-right: 40px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .itemDesc{
          font-size: 12px;
          color: rgb(100, 106, 115);
          line-height: 20px;
          width: 100%;
          padding-right: 40px;
        }
      }

      .itemIcon{
        display: none;
        margin: 0 12px;
        font-size: 16px;
        border-radius: 6px;
        padding: 4px;
        flex-shrink: 0;
        height: auto;
        line-height: 0;
        cursor: pointer;
        background: rgba(0, 0, 0, 0);
        border-color: rgba(0, 0, 0, 0);
      }
      .itemIcon:hover{
        background: rgba(31, 35, 41, 0.1);
        border-color: rgba(0, 0, 0, 0);
      }
    }
    .itemExtraBox{
      display: flex;
      align-items: center;
      gap: 10px;
      span{
        display: block;
        width: 100px;
      }
    }
    .itemExtraBoxAppUser{
      display: flex;
      align-items: center;
      gap: 10px;
      span{
        text-align: center;
        display: block;
        width: 500px;
      }
    }
  }
  .listItem:last-child .itemMain{
    border:none;
  }
  .listItem:hover{
    .itemIcon{
      display: block;
    }
  }

  }

  .treeShape1{
    
    :global{
      .ant-tree-treenode-selected > .ant-tree-node-content-wrapper::before{
        background-color: rgba(62, 91, 255, 0.1);
        position: absolute;
        right: 0;
        left: 0;
        height: 24px;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        content: '';
      }
      .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected{
        background-color: unset;
      }
      .ant-tree li .ant-tree-node-content-wrapper{
        width: calc(100% - 24px);
        .actionPart{
          position: absolute;
          right: 5px;
          display: none;
        }
      }
      .ant-tree li .ant-tree-node-content-wrapper:hover{
        background-color: unset;
        width: calc(100% - 79px);
        .actionPart{
          display: inline !important;
        }
      }
      .ant-tree-node-content-wrapper:hover::before{
        background-color: rgba(62, 91, 255, 0.1);
        position: absolute;
        right: 0;
        left: 0;
        height: 24px;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        content: '';
      }
      
    }
  }
  .treeShape2{
    :global{
      .ant-tree li .ant-tree-node-content-wrapper:hover{
        width: calc(100% - 106px) !important;
      }
    }
  }
